<template>
  <div class="container">
    <div class="main">
      <el-form :model="detail" :rules="{}" ref="information" label-width="180px" class="">
        <div class="sub_title">订单信息</div>
        <el-form-item label="订单类型" prop="plateEnable">{{detail.orderType || '暂无信息'}}</el-form-item>
        <el-form-item label="订单号" prop="plateEnable">{{detail.orderCode || '暂无信息'}}</el-form-item>
        <el-form-item label="订单状态" prop="plateEnable">{{statusDict[detail.orderStatus] || '暂无信息'}}</el-form-item>
        <el-form-item label="订单金额" prop="plateEnable">{{detail.totalPrice || '暂无信息'}}</el-form-item>
        <el-form-item label="优惠金额" prop="plateEnable"></el-form-item>
        <el-form-item label="需付金额" prop="plateEnable"></el-form-item>
        <el-form-item label="实付金额" prop="plateEnable">{{detail.actualPrice || '暂无信息'}}</el-form-item>
        <div class="sub_title">配送信息</div>
        <el-form-item label="收货人" prop="plateEnable">{{detail.contactName || '暂无信息'}}</el-form-item>
        <el-form-item label="手机号码" prop="plateEnable">{{detail.telNumber || '暂无信息'}}</el-form-item>
        <el-form-item label="收货地区" prop="plateEnable">{{detail.address || '暂无信息'}}</el-form-item>
        <el-form-item label="详细地址" prop="plateEnable">{{detail.detailedAddress || '暂无信息'}}</el-form-item>
        <div class="sub_title">发货进度</div>
        <el-form-item label="发货商品信息" prop="plateEnable">
          <el-table
            :data="detail.orderItems"
            stripe>
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="productTitle" label="商品名称"></el-table-column>
            <el-table-column prop="modelName" label="规格"></el-table-column>
            <el-table-column prop="modelSalePrice" label="单价（元）"></el-table-column>
            <el-table-column prop="count" label="数量"></el-table-column>
            <el-table-column prop="totalPrice" label="小计（元）"></el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="发货时间" prop="plateEnable"></el-form-item>
        <el-form-item label="物流公司" prop="plateEnable">
          {{
            deliverList.filter( item => {return item.value == company})[0].label
          }}
        </el-form-item>
        <el-form-item label="物流单号" prop="plateEnable">{{deliver.LogisticCode}}</el-form-item>
        <el-form-item label=物流进度 prop="plateEnable">
          <ul v-if="deliver && deliver.Traces && deliver.Traces.length">
            <li v-for="(item, index) in deliver.Traces" :key="index">
              <div>{{index+1}}、 到达时间：{{item.AcceptTime}}</div>
              <div>到达地点：{{item.AcceptStation}}</div>
            </li>
          </ul>
          <div v-else>暂无物流信息</div>
        </el-form-item>

        <el-form-item style="margin-top: 20px;">
          <el-button type="primary" @click="back()">返回</el-button>
        </el-form-item>
      </el-form>
      <el-dialog title="备注" :visible.sync="dialogVisible" width="30%">
        <el-input v-model="message" type="textarea" :rows="4"></el-input>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>

  </div>


</template>

<script>
  let CONSTANT = require('../../constant/constant.js');
  let common = require("../../common.js");
  import $ from 'jquery'
  export default {
    data() {
      return {
        detail: {},
        dialogVisible: false,
        message: "",
        statusDict: {
          "WAIT_SEND":"待发货",
          "WAIT_PAY": "未支付",
          "PART_SEND": "部分发货",
          "WAIT_GET": "待收货",
          "EVALUATION": "待评价",
          "COMPLETED": "已完成",
          "CANCEL_USER": "用户主动取消",
          "CANCEL_ADMIN": "后台取消",
          "CANCEL_TIMEOUT": "超时取消"
        },
        deliver: {},
        deliverList: [{
          label: "顺丰速运",
          value: "SF"
        },{
          label: "百世快递",
          value: "HTKY"
        },{
          label: "中通快递",
          value: "ZTO"
        },{
          label: "申通快递",
          value: "STO"
        },{
          label: "圆通速递",
          value: "YTO"
        },{
          label: "韵达速递",
          value: "YD"
        },{
          label: "邮政快递包裹",
          value: "YZPY"
        },{
          label: "EMS",
          value: "EMS"
        },{
          label: "天天快递",
          value: "HHTT"
        },{
          label: "京东快递",
          value: "JD"
        },{
          label: "优速快递",
          value: "UC"
        },{
          label: "德邦快递",
          value: "DBL"
        },{
          label: "宅急送",
          value: "ZJS"
        },{
          label: "TNT快递",
          value: "TNT"
        },{
          label: "FEDEX联邦(国内件）",
          value: "FEDEX"
        },{
          label: "FEDEX联邦(国际件）",
          value: "FEDEX_GJ"
        },],
        company: ""
      };
    },
    components:{
    },
    mounted() {
      this.company = this.$route.query.company
      this.getDetail()
      this.getKdDetail()
    },
    methods: {
      getDetail(){
        let url = CONSTANT.URL.ORDER.orderDetail
        common.get(url, this.$route.query.orderCode, res => {
          if (res.code == 200) {
            this.detail = res.data.bussData
          }
        })
      },
      getKdDetail() {
        let url = CONSTANT.URL.KD.detail
        let params = {
          logisticsCompanyType: this.$route.query.company,
          shipmentNumber: this.$route.query.shipmentNumber,
        }
        common.post(url, params, res => {
          if (res.code == 200) {
            this.deliver = JSON.parse(res.data.bussData)
            console.log(this.deliver)
          }
        })
      },
      editorInfo(val){
        this.information.detail = val;
      },
      resetForm(formName) {this.$refs[formName].resetFields();},
      back(){ this.$router.back()  },
    }
  }
</script>
<style lang="scss" scoped>
  .container .main .el-form-item {
    margin-bottom: 0px;
  }
</style>
